<template>
  <div>
    <el-dialog :title='title' :visible="showDialog" width="50%" :before-close="handleClose"
      :close-on-click-modal="false">
      <div class="content">
        <div class="table-box">
          <TableCom ref="tableCom" :tableHead="tableHead" :tableData="tableData" :delList="[]" :showSelect="false"
            :showIndex="false">
          </TableCom>
        </div>
        <div class="text-box">
          <div class="left-text">审批说明</div>
          <div class="right-text">
            <el-input type="textarea" :disabled="title == '查看' ? true : false" :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="" v-model="row.description">
            </el-input>
          </div>
        </div>
        <div class="text-box" v-if="title != '查看'">
          <div class="left-text"></div>
          <div class="right-text" style="color: #f00;">
            预扣额度调整后，该作物本自然年的统计数据会重新计算
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog1-footer">
        <el-button size="mini" v-if="title == '查看'" class="cancel" @click="handleClose">取 消</el-button>
        <template v-else>
          <el-button size="mini" class="cancel" @click="handleTurnDown">驳 回</el-button>
          <el-button size="mini" v-if="title != '查看'" class="addButton" type="primary" @click="handleSubmit">同
            意</el-button>
        </template>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { viewApi, updateByApi, updateStatusApi } from '@/api/limit'
import TableCom from '@/components/TableCom'
import { Message, MessageBox } from 'element-ui'
export default {
  props: ['showDialog'],
  components: {
    TableCom,
  },
  data() {
    return {
      title: '',
      row: {},
      tableHead: [{
        title: '粮食种类',
        prop: 'cropType'
      }, {
        title: '年份',
        prop: 'year'
      }, {
        title: '净重(kg)',
        prop: 'nw'
      }, {
        title: '预扣额度(%)',
        prop: 'lines'
      }, {
        title: '实重(kg)',
        prop: 'solid'
      }],
      tableData: [],
    };
  },
  methods: {
    handleClose() {
      this.id = ''
      this.$emit('update:showDialog', false)
    },
    handleTurnDown() {
      if (!this.row.description) {
        Message({
          message: '请填写审批说明',
          type: 'warning',
          duration: 5 * 1000
        })
        return
      }
      MessageBox.confirm('确定驳回吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'cancel',
        type: 'warning'
      }).then(async () => {
        let { code } = await updateByApi({ id: this.row.id, description: this.row.description })
        if (code == 0) {
          this.$message({
            message: '已驳回',
            type: 'warning'
          });
        }
        this.$emit('handleRefresh')
        this.handleClose()
      })
    },
    async handleSubmit() {
      let { code } = await updateStatusApi({ farmCode: this.row.farmCode, teamCode: this.row.teamCode, cropType: this.row.cropType, id: this.row.id, description: this.row.description, year: this.row.year, status: '1' })
      if (code == 0) {
        this.$message({
          message: '已同意',
          type: 'success'
        });
      }
      this.$emit('handleRefresh')
      this.handleClose()
    },
    async handleGetList(id) {
      let res = await viewApi(id)
      this.tableData = res.data
    },
  }
}
</script>

<style lang='scss' scoped>
.content {
  width: 100%;
  height: 500px;
  overflow-y: auto;
  margin-bottom: 20px;
  border: 1px solid rgb(238, 238, 238);
  padding: 10px;

  .table-box {
    min-height: 300px;
  }

  .text-box {
    display: flex;
    line-height: 40px;

    .left-text {
      width: 20%;
      text-align: center;
    }

    .right-text {
      flex: 1
    }
  }
}

.dialog1-footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 20px;
}

.cancel {
  border-radius: 5px;
  position: relative;
  line-height: 20px;
  text-align: center;
  font-size: 14px;

  &:hover,
  &:focus {
    background: rgba($color: #e8f4ff, $alpha: 1) !important;
    border: 1px solid #0e7b67 !important;
    color: #0e7b67 !important;
  }

}
</style>
